<template>
	<!-- 工作流时间线容器 - 参考效果优化版 -->
	<div class="workflow-timeline-container">
		<!-- 简化的时间线头部 -->
		<div class="timeline-header" v-if="localData.approveRecords.length > 0">
			<h4 class="timeline-title">审批流程</h4>
			<el-button type="primary" :icon="Refresh" :loading="loading" @click="refreshData" circle title="刷新审批信息"></el-button>
		</div>

		<!-- 时间线列表 -->
		<div class="timeline-list">
			<div v-for="(activity, index) in localData.approveRecords" :key="index" class="timeline-item">
				<!-- 左侧时间线 -->
				<div class="timeline-line">
					<!-- 节点头像 -->
					<div class="timeline-avatar">
						<el-avatar :size="36" :src="getAvatarUrl(activity)" :style="{ backgroundColor: getNodeColor(activity) }">
							<el-icon v-if="!getApproverName(activity)">
								<component :is="getIcon(activity)" />
							</el-icon>
							<span v-else>{{ getAvatarText(getApproverName(activity)) }}</span>
						</el-avatar>
					</div>
					<!-- 连接线 -->
					<div v-if="index < localData.approveRecords.length - 1" class="timeline-connector"></div>
				</div>

				<!-- 右侧内容 -->
				<div class="timeline-content">
					<!-- 主要信息 -->
					<div class="content-main">
						<div class="content-header">
							<span class="processor-name">{{ getApproverName(activity) }}</span>
							<span class="process-time">{{ getApprovalTime(activity) }}</span>
						</div>
						<!-- <div class="process-action">{{ getApprovalComment(activity) }}</div> -->
						<!-- 审批人职责信息 -->
						<div v-if="getApproverDuty(activity)" class="duty-info">
							<span class="duty-text">{{ getApproverDuty(activity) }}</span>
						</div>
					</div>

					<!-- 状态标识 -->
					<div class="status-indicator">
						<span class="status-badge" :class="getStatusClass(activity)">
							{{ getApprovalResult(activity) }}
						</span>
						<span v-if="getApproverName(activity) && getApproverName(activity) !== '系统'" class="processor-role">
							{{ getApprovalGroup(activity) }}
						</span>
					</div>

					<!-- 审批意见 -->
					<div v-if="getApprovalComment(activity)" class="remark-content">
						<span class="remark-text">"{{ getApprovalComment(activity) }}"</span>
					</div>
				</div>
			</div>
		</div>

		<!-- 流程图展示 -->
		<!-- <div class="flow-chart-section" v-if="localData.approveRecords.length > 0">
			<div class="section-divider"></div>
			<WorkflowChart :title="'审批流程图'" :nodes="flowNodes" :edges="flowEdges" :show-header="true" :height="450" />
		</div> -->
	</div>
</template>

<script setup lang="ts">
import { watch, reactive, computed, ref } from 'vue';
import loginApi from '/@/api/login';
import { CircleCheck, CloseBold, Document, Clock, Setting, Refresh } from '@element-plus/icons-vue';
import WorkflowChart from '/@/components/workflowChart/index.vue';
// 工作流状态枚举 - 已移除，不再使用

interface ApprovalRecord {
	// 新字段结构 - 只保留图片中显示的字段
	Approver?: string;
	ApproverAvatar?: string;
	ApproverDuty?: string;
	ApproverName?: string;
	ApproveGroup?: string;
	ActivityId?: string;
	ApproveComment?: string;
	ApproveResult?: string;
	ApproveTime?: string;
	ID?: string;
	ModelId?: string;
	ModelType?: string;
	WorkflowId?: string;
	WorkflowName?: string;
}

const props = defineProps({
	flowName: String,
	entityType: String,
	entityId: null,
});

const localData = reactive({
	approveRecords: [] as ApprovalRecord[],
});

const loading = ref(false);

// 获取规范化的Action值
const getNormalizedAction = (data: ApprovalRecord): string => {
	// 直接使用ApproveResult字段
	return data.ApproveResult || '未知';
};

// 加载审批数据
const loadApprovalData = () => {
	if (props.entityId) {
		loading.value = true;
		loginApi()
			.getTimeLine(props.flowName ?? '', props.entityType ?? '', props.entityId ?? '')
			.then((data: any) => {
				localData.approveRecords = data;
			})
			.finally(() => {
				loading.value = false;
			});
	}
};

// 刷新数据
const refreshData = () => {
	loadApprovalData();
};

// 监听实体ID变化
watch(
	() => props.entityId,
	() => {
		loadApprovalData();
	}
);

// 获取节点颜色
const getNodeColor = (data: ApprovalRecord): string => {
	const action = getNormalizedAction(data);
	const colorMap: Record<string, string> = {
		同意: '#67C23A',
		拒绝: '#F56C6C',
		发起: '#909399',
		完成: '#67C23A',
	};
	return colorMap[action] || '#409EFF';
};

// 获取状态样式类
const getStatusClass = (data: ApprovalRecord): string => {
	const action = getNormalizedAction(data);
	const classMap: Record<string, string> = {
		同意: 'status-success',
		拒绝: 'status-danger',
		发起: 'status-info',
		完成: 'status-success',
		等待审批: 'status-pending',
	};
	return classMap[action] || 'status-primary';
};

// 获取状态文本
const getStatusText = (data: ApprovalRecord): string => {
	const action = getNormalizedAction(data);
	const textMap: Record<string, string> = {
		发起: '发起',
		同意: '同意',
		拒绝: '拒绝',
		完成: '完成',
	};
	return textMap[action] || action;
};

// 获取角色文本
const getRoleText = (data: ApprovalRecord): string => {
	const action = getNormalizedAction(data);
	if (action === '发起') return '发起人';
	if (action === '完成') return '完成';
	return '审批人';
};

// 获取状态图标
const getIcon = (data: ApprovalRecord) => {
	const action = getNormalizedAction(data);
	const iconMap: Record<string, any> = {
		同意: CircleCheck,
		拒绝: CloseBold,
		发起: Document,
		完成: CircleCheck,
	};
	return iconMap[action] || Setting;
};

// 获取头像文本
const getAvatarText = (name: string) => {
	return name?.substring(0, 1) || '';
};

// 获取审批人姓名
const getApproverName = (data: ApprovalRecord): string => {
	return data.ApproverName || data.Approver || '系统';
};

// 获取审批时间
const getApprovalTime = (data: ApprovalRecord): string => {
	return data.ApproveTime || '';
};

// 获取审批意见
const getApprovalComment = (data: ApprovalRecord): string => {
	return data.ApproveComment || '';
};

// 获取审批结果
const getApprovalResult = (data: ApprovalRecord): string => {
	return data.ApproveResult || '未知';
};

// 获取审批组
const getApprovalGroup = (data: ApprovalRecord): string => {
	return data.ApproveGroup || '审批人';
};

// 获取审批人职责
const getApproverDuty = (data: ApprovalRecord): string => {
	return data.ApproverDuty || '';
};

// 获取头像URL
const getAvatarUrl = (data: ApprovalRecord): string => {
	if (data.ApproverAvatar) {
		return `/api/_file/getfile/${data.ApproverAvatar}?width=36&height=36`;
	}
	return 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
};

// 流程图节点
const flowNodes = computed(() => {
	return localData.approveRecords.map((record, index) => {
		const action = getNormalizedAction(record);
		const getNodeStatus = (action: string): 'completed' | 'processing' | 'pending' | 'error' => {
			if (action === '同意' || action === '完成' || action === '发起') return 'completed';
			if (action === '拒绝') return 'error';
			return 'pending';
		};

		const nodeType: 'start' | 'process' | 'end' = action === '发起' ? 'start' : action === '完成' ? 'end' : 'process';

		return {
			id: `node-${index}`,
			type: nodeType,
			label: getApprovalComment(record) || `步骤 ${index + 1}`,
			status: getNodeStatus(action),
			description: getApprovalComment(record) || `${action} - ${getApprovalComment(record)}`,
			assignee: getApproverName(record),
			time: getApprovalTime(record),
			data: record,
		};
	});
});

// 流程图边
const flowEdges = computed(() => {
	const edges = [];
	for (let i = 0; i < localData.approveRecords.length - 1; i++) {
		const currentAction = getNormalizedAction(localData.approveRecords[i]);
		const nextAction = getNormalizedAction(localData.approveRecords[i + 1]);

		let status: 'completed' | 'processing' | 'pending' | 'error' = 'pending';
		if (currentAction === '同意' || currentAction === '完成' || currentAction === '发起') {
			status = 'completed';
		} else if (currentAction === '拒绝') {
			status = 'error';
		}

		edges.push({
			id: `edge-${i}`,
			source: `node-${i}`,
			target: `node-${i + 1}`,
			status,
			animated: false,
		});
	}
	return edges;
});
</script>

<style scoped lang="scss">
// 参考效果的时间线样式
.workflow-timeline-container {
	padding: 20px;
	background: var(--el-bg-color);
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	border: 1px solid var(--el-border-color-light);

	// 暗黑模式适配
	html.dark & {
		background: var(--el-bg-color);
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
		border: 1px solid var(--el-border-color-light);
	}

	.timeline-header {
		margin-bottom: 24px;
		border-bottom: 1px solid var(--el-border-color-light);
		padding-bottom: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.timeline-title {
			margin: 0;
			font-size: 18px;
			font-weight: 600;
			color: var(--el-text-color-primary);
		}
	}

	.timeline-list {
		position: relative;
	}

	.timeline-item {
		display: flex;
		position: relative;
		margin-bottom: 24px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.timeline-line {
		position: relative;
		margin-right: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.timeline-avatar {
			position: relative;
			z-index: 2;

			.el-avatar {
				border: 2px solid var(--el-bg-color);
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			}
		}

		.timeline-connector {
			position: absolute;
			top: 40px;
			left: 50%;
			transform: translateX(-50%);
			width: 2px;
			height: 48px;
			background: var(--el-border-color-lighter);
			z-index: 1;
		}
	}

	.timeline-content {
		flex: 1;
		padding-top: 2px;

		.content-main {
			margin-bottom: 8px;

			.content-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 4px;

				.processor-name {
					font-size: 15px;
					font-weight: 600;
					color: var(--el-text-color-primary);
				}

				.process-time {
					font-size: 13px;
					color: var(--el-text-color-regular);
				}
			}

			.process-action {
				font-size: 14px;
				color: var(--el-text-color-regular);
				line-height: 1.5;
			}
		}

		.status-indicator {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 8px;

			.status-badge {
				display: inline-block;
				padding: 2px 8px;
				border-radius: 12px;
				font-size: 12px;
				font-weight: 500;

				&.status-success {
					background: var(--el-color-success-light-9);
					color: var(--el-color-success);
				}

				&.status-danger {
					background: var(--el-color-danger-light-9);
					color: var(--el-color-danger);
				}

				&.status-primary {
					background: var(--el-color-primary-light-9);
					color: var(--el-color-primary);
				}

				&.status-warning {
					background: var(--el-color-warning-light-9);
					color: var(--el-color-warning);
				}

				&.status-info {
					background: var(--el-color-info-light-9);
					color: var(--el-color-info);
				}

				&.status-pending {
					background: var(--el-bg-color-page);
					color: var(--el-text-color-primary);
					border: 1px solid var(--el-border-color-light);
				}
			}

			.processor-role {
				font-size: 12px;
				color: var(--el-text-color-regular);
			}
		}

		.remark-content {
			.remark-text {
				font-size: 14px;
				color: var(--el-text-color-regular);
				font-style: italic;
				line-height: 1.5;
			}
		}

		.duty-info {
			margin-top: 4px;

			.duty-text {
				display: inline-block;
				padding: 2px 8px;
				background: var(--el-bg-color-page);
				color: var(--el-text-color-regular);
				border-radius: 4px;
				font-size: 12px;
				font-weight: 500;
				border: 1px solid var(--el-border-color-light);
			}
		}
	}

	.flow-chart-section {
		margin-top: 32px;

		.section-divider {
			height: 1px;
			background: var(--el-border-color-light);
			margin-bottom: 24px;
		}
	}
}

// 响应式设计
@media (max-width: 768px) {
	.workflow-timeline-container {
		padding: 16px;

		.timeline-item {
			margin-bottom: 20px;
		}

		.timeline-line {
			margin-right: 16px;

			.timeline-avatar {
				.el-avatar {
					width: 32px !important;
					height: 32px !important;
				}
			}

			.timeline-connector {
				top: 36px;
				height: 40px;
			}
		}

		.timeline-content {
			.content-main {
				.content-header {
					flex-direction: column;
					align-items: flex-start;
					gap: 4px;

					.processor-name {
						font-size: 14px;
					}

					.process-time {
						font-size: 12px;
					}
				}

				.process-action {
					font-size: 13px;
				}
			}

			.status-indicator {
				flex-direction: column;
				align-items: flex-start;
				gap: 4px;
			}

			.remark-content {
				.remark-text {
					font-size: 13px;
				}
			}
		}
	}
}
</style>
